import React from 'react'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'

const DynamicFieldSet = () => {
  function onDragStart(data) {
    console.info('onDragStart', data)
  }

  function onDragUpdate(data) {
    console.info('onDragUpdate', data)
  }

  function onDragEnd(data) {
    console.info('onDragEnd', data)
  }

  const grid = 8

  const getItemStyle = (isDragging, draggableStyle) => ({
    // some basic styles to make the items look a bit nicer
    userSelect: 'none',
    padding: grid * 2,
    margin: `0 0 ${grid}px 0`,

    // change background color if dragging
    background: isDragging ? 'lightgreen' : 'grey',

    // styles we need to apply on draggables
    ...draggableStyle
  })

  const getListStyle = isDraggingOver => ({
    background: isDraggingOver ? 'lightblue' : 'lightgrey',
    padding: grid,
    width: 250
  })

  return (
    <DragDropContext
      onDragStart={onDragStart}
      onDragUpdate={onDragUpdate}
      onDragEnd={onDragEnd}
    >
      <Droppable droppableId="test">
        {
          (provided, snapshot) => (
            <div {...provided}
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
            >
              <Draggable key="rest" draggableId="rest" index={1}>
                {
                  (provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style
                      )}
                    >
                      <div>aaaaa</div>
                    </div>
                  )
                }

              </Draggable>
              <Draggable key="rest2" draggableId="rest2" index={2}>
                {
                  (provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style
                      )}
                    >
                      <div>bbbb</div>
                    </div>
                  )
                }

              </Draggable>
            </div>
          )
        }

      </Droppable>

    </DragDropContext>
  )
}

export default DynamicFieldSet
